<template>
<div class="listBox">
  <div class="list_title">
     <span>{{ isChina === 'zh_CN' ? listobj.zhCN : listobj.enUS}}</span>
  </div>
  <div class="list_content">
    <div class="list_production">
      <div class="titleBack">
        <span class="backText">{{$t('bigScreen.OutputStatistics')}}</span>
        <span><img src="~images/bigScreen/collectScreen/titbacki.png"/></span>
      </div>
      <div class="list_wrap">
        <Row class="list_wrap_progressBox">
          <Col :span="9">
            <div class="loop_box">
              <span class="loop_top" ref="imgloopBox"/>
              <span class="loop_bot">
                 <img src="~images/bigScreen/collectScreen/loopbot.png"/>
              </span>
            </div>
          </Col>
          <template v-for="item in progress">
            <Col :key="item.text" :span="5" style="display: flex;justify-content: center;align-items: center;">
              <div :key="item.text" class="progressBox">
                <div class="progressBox_info">
                  <span class="progressBox_top">{{item.planinfo}}</span>
                  <div class="progressList"
                       :style="{ height: (item.precent / item.planinfo) * 100 + '%',
                       backgroundColor:item.bcolor}">
                    <span class="progressBox_bot"
                          :style="{top:item.planinfo ? (Number((item.precent / item.planinfo) * 100) > 75 ? 0 : '-20px') : '-20px'}"
                    >{{item.precent}}</span>
                  </div>
                </div>
                <span class="progressBox_text">{{item.text}}</span>
              </div>
            </Col>
          </template>
        </Row>
      </div>
    </div>
    <div class="list_production">
      <div class="titleBack">
        <span class="backText"> {{$t('bigScreen.EquipmentEfficiency')}}</span>
        <span><img src="~images/bigScreen/collectScreen/titbacki.png"/></span>
      </div>
      <div class="list_wrap">
        <Row>
          <Col :span="12" class="list_wrap_chart">
            <div class="list_wrap_gauge">
              <dv-charts :option="optionOne" />
            </div>
            <div class="list_wrap_percent">
                <Progress hide-info :percent="listobj.listInfo.oeeYtd" status="active"  stroke-color="#00CEB6"/>
<!--                <span class="list_wrap_percent_span">{{Number(listobj.listInfo.oeeYtd)}}%</span>-->
              <div class="list_wrap_bot">
                <span class="title">YTD</span>
                <span class="list_wrap_percent_span">{{Number(listobj.listInfo.oeeYtd)}}%</span>
              </div>
            </div>
          </Col>
          <Col :span="12" class="list_wrap_chart">
            <div class="list_wrap_gauge">
              <dv-charts :option="optionTwo" />
            </div>
            <div class="list_wrap_percent">
<!--                <span class="title">YTD</span>-->
                <Progress hide-info :percent="listobj.listInfo.neeYtd" status="active"  stroke-color="#D8E751"/>
<!--                <span class="list_wrap_percent_span">{{Number(listobj.listInfo.neeYtd)}}%</span>-->
              <div class="list_wrap_bot">
                <span class="title">YTD</span>
                <span class="list_wrap_percent_span">{{Number(listobj.listInfo.neeYtd)}}%</span>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    </div>
    <div class="list_production">
      <div class="titleBack">
        <span class="backText">{{$t('bigScreen.FlightManagement')}}</span>
        <span><img src="~images/bigScreen/collectScreen/titbacki.png"/></span>
      </div>
      <div class="list_wrap">
        <Row class="wrap_shift">
          <Col :span="7" style="display: flex;justify-content: center;align-items: center;">
            <span class="wrap_shift_circle">
                <dv-water-level-pond
                :config="listobj.listInfo.waterConfig"
                style="width:116px;
                height:116px" />
            </span>
          </Col>
          <Col :span="17">
            <div class="shfit_precent">
              <div class="precent_item">
                <span class="top_title">{{$t('bigScreen.ScheduleAdherence')}}</span>
              </div>
              <div class="precent_item">
                <span class="people_num">{{$t('bigScreen.Attendance')}}</span>
                <span class="people_num">{{listobj.listInfo.boardCompanyShiftVo.attendance}}/{{listobj.listInfo.boardCompanyShiftVo.planPeopleNumber}}{{$t('bigScreen.Person')}}</span>
              </div>
              <div class="precent_item">
                <template v-for="item in 10">
                  <span class="peo_img">
                  <img src="~images/bigScreen/collectScreen/peogree.png"/>
                  </span>
                </template>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    </div>
    <div class="list_production">
      <div class="titleBack">
        <span class="backText">{{$t('bigScreen.QvalueMonitoring')}}</span>
        <span><img src="~images/bigScreen/collectScreen/titbacki.png"/></span>
      </div>
      <div class="list_wrap">
        <Row class="wrap_qzhi">
          <Col :span="12" class="wrap_qzhi_col">
            <div class="wrap_qzhi_box">
              <div class="qzhi_box_title">
                <span class="qzhi_box_title_img"><img src="~images/bigScreen/collectScreen/weekly.png"/></span>
                <span class="qzhi_box_title_text"> {{$t('bigScreen.LowerFive')}}</span>
              </div>
              <div class="scrollBox">
                <template v-for="item in listobj.listInfo.weekReportQList">
                <div class="qzhi_box_item">
                  <div class="qzhi_box_item_bg"/>
                  <span class="qzhi_box_item_line left">{{$t('bigScreen.Line')}}: {{item.lineName}}</span>
                  <span class="qzhi_box_item_line right">{{$t('bigScreen.Qvalue')}}: {{item.q}}</span>
                </div>
              </template>
              </div>

            </div>
          </Col>
          <Col :span="12" class="wrap_qzhi_col">
            <div class="wrap_qzhi_box">
              <div class="qzhi_box_title" @click="checkCharts(listobj)">
                <span class="qzhi_box_title_img"><img src="~images/bigScreen/collectScreen/monthly.png"/></span>
                <span class="qzhi_box_title_text">{{$t('bigScreen.LowerTwenty')}}</span>
              </div>
              <div class="scrollBox">
                <template v-for="item in listobj.listInfo.monthReportQList">
                  <div class="qzhi_box_item">
                    <div class="qzhi_box_item_bg"/>
                    <span class="qzhi_box_item_line left">{{$t('bigScreen.Line')}}: {{item.lineName}}</span>
                    <span class="qzhi_box_item_line right">{{$t('bigScreen.Qvalue')}}: {{item.q}}</span>
                  </div>
                </template>
              </div>

            </div>
          </Col>
        </Row>
      </div>
    </div>
  </div>

  <Modal :mask-closable="false"
      v-model="chartStatus"
      :closable="false"
      width="56%"
      title="马达工厂MonthlyQ值统计"
      class-name="collectChartModel"
  >
    <Row>
      <template v-if="chartStatus">
       <template v-if="MonthChartData">
         <collectChart :chart-info="MonthChartData"/>
       </template>
      </template>
    </Row>
    <div slot="footer"/>
  </Modal>
</div>
</template>
<script>
import collectChart from "@/bigScreen/chart/collectChart";
import { charts, waterLevelPond } from '@jiaminghi/data-view';
import Vue from 'vue';
Vue.use(waterLevelPond)
Vue.use(charts)

export default {
  name: "collectScreenList",
  components:{collectChart},
  props: {
    isChina: {
      type: String,
      default: ''
    },
    chartData: {
      type: Object,
      default: () =>{}
    },
    listobj: {
      type: Object,
      default: () => {}
    }
  },
  data(){
    return{
      MonthChartData:{},
      chartStatus:false,
      progress:[],
      optionTwo:{
        title: {
          show:false
        },
        series: [
          {
            type: 'gauge',
            data: [ {
              name: 'gaugeA',
              value: this.listobj.listInfo.avgNee,
              gradient: ['#D8E751']
            } ],
            backgroundArc:{
              show:true,
              style:{
                fill:'#264563',
                stroke:'#264563',
              }
            },
            details: {
              show:true,
              style: {
                fontSize: 20,
                fill: '#F7FFFF',
              },
              offset:[0, -25],
              formatter: '{value}%\n' + `${this.$t('bigScreen.MonthlyNEE')}`,
            },
            center: ['50%', '98%'],
            radius:'156%',
            arcLineWidth:8,
            axisLabel: {
              show:false
            },
            pointer:{
              show:false
            },
            axisTick: {
              show:false
            },
            animationCurve: 'easeOutCubic',
            animationFrame:40
          }
        ]
      },
      optionOne:{
        title: {
          show:false
        },
        series: [
          {
            type: 'gauge',
            data: [ {
              name: 'gaugeA',
              value: this.listobj.listInfo.avgOee,
              gradient: ['#00CEB6']
            } ],
            backgroundArc:{
              show:true,
              style:{
                fill:'#264563',
                stroke:'#264563',
              }
            },
            details: {
              show:true,
              style: {
                fontSize: 20,
                fill: '#F7FFFF',
              },
              offset:[0, -25],
              formatter: '{value}%\n' + `${this.$t('bigScreen.MonthlyOEE')}`,
            },
            center: ['50%', '98%'],
            radius:'156%',
            arcLineWidth:8,
            axisLabel: {
              show:false
            },
            pointer:{
              show:false
            },
            axisTick: {
              show:false
            },
            animationCurve: 'easeOutCubic',
            animationFrame:40
          }
        ]
      }
    }
  },
  mounted(){
    this.$nextTick(()=>{
      let path = '//img/loop/'
      const isTong = process.env.NODE_ENV === 'tong';
      if (isTong){
        path = '/img/loop/'
      }
      this.keyAnimate(0,80,path);
    })
    this.progress = [
      { precent:this.listobj.listInfo.shiftYield,
        planinfo:this.listobj.listInfo.shiftPlanYield,
        bcolor:this.getColor(this.listobj.listInfo.shiftYieldColor),
        text:`${this.$t('bigScreen.Day')}`},
       {precent:this.listobj.listInfo.monthYield,
        planinfo:this.listobj.listInfo.monthPlanYield,
        bcolor:this.getColor(this.listobj.listInfo.monthYieldColor),
        text:`${this.$t('bigScreen.Currentmonth')}`},
       {precent:this.listobj.listInfo.yearYield,
        planinfo:this.listobj.listInfo.yearPlanYield,
        bcolor:this.getColor(this.listobj.listInfo.yearYieldColor),
        text:`${this.$t('bigScreen.Currentyear')}`},
    ]
    this.getReportQ()
  },
  methods:{
    getReportQ(){
      if(this.chartData){
        let xData=this.chartData[0].map((item)=>{
          return item.lineName;
        })
        let yData1=this.chartData[0].map((item)=>{
          return item.q;
        })
        let yData2=this.chartData[0].map((item)=>{
          return [item.lineName,item.q];
        })
        let xxData=this.chartData[1].map((item)=>{
          return item.lineName;
        })
        let yyData1=this.chartData[1].map((item)=>{
          return item.q;
        })
        let yyData2=this.chartData[1].map((item)=>{
          return [item.lineName,item.q];
        })
        this.MonthChartData = {
          xxData,
          yyData1,
          yyData2
        }
      }
    },
    checkCharts(){
      if (this.listobj.zhCN === '马达工厂'){
        this.chartStatus = true
      }
    },
    getColor(num){
      let color;
      switch (num) {
         case 1:
           color = '#C2D139';
           break;
        case 2:
          color = '#26B7A6';
          break;
        case 3:
          color = '#E2454C';
          break;
      }
      return color
    },
    keyAnimate(startnum,picnum,path){
      const _self = this
      var count = 0;
      var imgArr = [];
      for(var i=0;i<=picnum;i++){
        (function(i){
          var img = new Image();
          img.onload = function(){
            img.onload = null;
            count++;
            imgArr[i-1] = img;
            if(count === picnum){
              _self.keyFrames(imgArr)
            }
          }
          // img.onload()
          img.src = path+(startnum+i)+'.png';
        })(i);
      }
    },
    keyFrames(imgArr){
      const el = this.$refs.imgloopBox
      let keyFrames = new CanvasKeyFrames(
          el, 'array', imgArr, {
        fps:22,
        width: 100,
        height: 210
      });
      keyFrames.play();
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .collectChartModel{
  .ivu-modal{
    background: url(~images/bigScreen/collectScreen/coloctChart.png)  no-repeat center center;
    background-size:100% 100%;
    .ivu-modal-content{
      height: 385px;
      background-color: transparent;
      border: 0;
      border-radius: 0;
      background-clip: padding-box;
      box-shadow: none;
      .ivu-modal-header{
        border: none;
        padding: 10px 16px;
        .ivu-modal-header-inner{
          display: flex;
          justify-content: center;
          align-items: center;
          height: auto;
          line-height: 1;
          font-size: 25px;
          font-family: SourceHanSansCN-Bold, SourceHanSansCN;
          font-weight: bold;
          color: #FFFFFF;
        }
      }
      .ivu-modal-body{
        padding: 0;
        height: 100%;
        .ivu-row{
          height: 340px;
          display: flex !important;
          flex-direction: column;
          justify-content: flex-end;
        }
      }
      .ivu-modal-footer{display: none !important;}
    }
  }
}
.listBox{
  display: flex;
  justify-content: flex-start;
  width: 100%;
  .list_content{
    width: 100%;
    padding: 0 10px;
    .list_production{
      width: 100%;
      padding-bottom: 20px;
      .list_wrap{
        width: 100%;
        .list_wrap_progressBox{
          display: flex;
          align-items: center;
        }
        .progressBox{
          display: flex;
          flex-direction: column;
          margin-top: 35px;
          .progressBox_text{
            font-size: 15px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #C2E8EA;
            margin-top: 5px;
          }
          .progressBox_info{
            position: relative;
            width: 40px;
            height: 175px;
            background: url(~images/bigScreen/collectScreen/tree.png)  no-repeat center center;
            background-size:100% 100%;
            .progressBox_top{
              position: absolute;
              font-size: 18px;
              color: #C2E8EA;
              text-decoration:underline;
              top: 0;
              left: 40px
            }
            .progressList {
              position: absolute;
              width: 15px;
              left: 8px;
              bottom: 0;
              max-height: 88%;
              .progressBox_bot{
                //display: inline-block;
                //margin: 0;
                //padding: 0;
                position: absolute;
                font-size: 18px;
                color: #C2E8EA;
                left: 32px;
                //top: -20px;
                height: auto;
                //border-bottom: 1px solid #EEEEEE;
                text-decoration:underline;
                //padding: 2px 0;
              }
            }
          }
        }
        .wrap_qzhi{
          .wrap_qzhi_col{
            padding: 0 5px;

            .wrap_qzhi_box{
              display: flex;
              flex-direction: column;

              .scrollBox{
                height: 130px;
                overflow: scroll;
                &::-webkit-scrollbar {
                    width: 0px;
                    height: 1px;
                }
              }
              .qzhi_box_item{
                width: 100%;
                height: 26px;
                margin-top: 5px;
                position: relative;
                .qzhi_box_item_bg{
                  width: 100%;
                  height: 100%;
                  background: linear-gradient(45deg, #66B9FF 0%, #1E7D86 100%);
                  opacity: 0.44;
                }
                .left{
                  left: 10px;
                }
                .right{
                  right: 10px;
                }
                .qzhi_box_item_line{
                  position: absolute;
                  top:0;
                  font-size: 14px;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #C0E8FF;
                }
              }
              .qzhi_box_title{
                margin: 10px 0;
                width: 100%;
                height: 54px;
                background: #091E55;
                box-shadow: inset 0px 1px 9px 2px rgba(0,125,225,0.53);
                border-radius: 2px;
                opacity: 0.85;
                border: 1px solid #028EFE;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .qzhi_box_title_img{
                  width: 35px;
                  height: 35px;
                  margin: 0 10px;
                  img{
                    width: 100%;
                    height: 100%;
                  }
                }
                span{
                  font-size: 16px;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #FFFFFF;
                }
              }

            }

          }
        }
        .wrap_shift{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 15px;
          .wrap_shift_circle{
            width: 128px;
            height: 128px;
            border-radius: 50%;
            border: 3px dashed #395469;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          ::v-deep .dv-water-pond-level text{
            fill:white
          }
          .shfit_precent{
            display: flex;
            flex-direction: column;
            .precent_item{
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-bottom: 10px;
              .peo_img{
                width: 22px;
                height: 27px;
                display: inline-block;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              .top_title{
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
              }
              .people_num{
                font-size: 16px;
                font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                font-weight: bold;
                color: #C2E8EA;
              }
            }
          }
        }
        .list_wrap_chart{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 5px;
          position: relative;
          .list_wrap_gauge{
            margin-top: 10px;
            margin-bottom: 5px;
            width: 63%;
            height: 85px;
            padding: 0 5px;
            background: url(~images/bigScreen/collectScreen/gaugeChart.png)  no-repeat center center;
            background-size:100% 100%;
          }
          .list_wrap_percent{
            display: flex;
            //justify-content: space-around;
            //align-items: center;
            flex-direction: column;
            align-items: center;
            //margin-top: 5px;
            width: 100%;
            //height: 7px;
            .list_wrap_bot{
              width: 63%;
              //margin-top: 5px;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            //.title,.list_wrap_percent_span{position: absolute;}
            //.title{
            //  bottom: -8px;
            //  left: 15px;
            //}
            .list_wrap_percent_span{
              text-align: left;
              color: #C2E8EA;
              font-size: 15px;
              //bottom: -8px;
              //right:  0;
            }
            ::v-deep .ivu-progress-inner{
              background-color:#2D3E61;
              .ivu-progress-bg{width: 100% !important;
                display: flex;
                align-items: center;
                justify-content: flex-end;
              }
            }
            ::v-deep .ivu-progress-text-inner,.title{
              font-size: 15px;
              font-family: SourceHanSansCN-Medium, SourceHanSansCN;
              font-weight: 500;
              color: #C2E8EA;
            }
            .ivu-progress{
              width:63%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
        .loop_box{
          width: 100%;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          .loop_top{
            width: 100px;
            height: 210px;
          }
          .loop_bot{
            width: 150px;
            height: 50px;
            margin-top: -12px;
          }
          .loop_top,.loop_bot{
            display: block;
            //width: 100%;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .titleBack{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 18px;
        width: 100%;
        height: 43px;
        line-height: 40px;
        padding-left: 25px;
        background: url(~images/bigScreen/collectScreen/titback.png)  no-repeat center center;
        background-size:100% 100%;
        background-attachment:fixed;
        .backText{
          margin-right: 5px;
          font-family: SourceHanSansCN-Bold, SourceHanSansCN;
          font-weight: bold;
          color: #71CEFF;
        }
      }
    }
  }
  .list_title{
    width: 41px;
    height: 696px;
    background: url(~images/bigScreen/collectScreen/leftback.png) no-repeat;
    background-size:100% 100%;
    span{
      text-align: center;
      padding-top: 35px;
      font-size: 27px;
      font-family: FZLTDHK--GBK1-0, FZLTDHK--GBK1;
      font-weight: normal;
      color: #FFFFFF;
      display: block;
      word-wrap: break-word;
    }
  }
}
</style>
